<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div>
        <!-- 搜索 -->
        <el-date-picker
            ref="rangPicker"
          v-model="pickDateRange"
          size="mini"
          type="daterange"
          range-separator="至"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="截至日期">
        </el-date-picker>
        <rrOperation :crud="crud" />
      </div>
      <br>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="50" />
        <el-table-column prop="create_time" label="上报日期" width="140" align="center" />
        <el-table-column prop="ds" label="设备开关" width="80" align="center" />
        <el-table-column prop="ws" label="工作状态" width="80" align="center" />
        <el-table-column prop="rps" label="雨控状态" width="80" align="center" />
        <el-table-column prop="tps" label="温控状态" width="80" align="center" />
        <el-table-column prop="dps" label="倾倒状态" width="80" align="center" />
        <el-table-column prop="tt" label="定时" width="80" align="center" />
        <el-table-column prop="ct" label="电击次数" width="80" align="center" />
        <el-table-column prop="at" label="环境温度" width="80" align="center" />
        <el-table-column prop="ah" label="环境湿度" width="80" align="center" />
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import CRUD, { presenter, header, form, crud } from '@crud/V2/crud'
import rrOperation from '@crud/V2/RR.operation'
import pagination from '@crud/V2/Pagination'
import Date from "@/utils/datetime";

const defaultForm = { id: null }
export default {
  name: 'xcdDetial',
  components: { pagination, rrOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({ title: '杀虫灯数据查看', url: 'api/v2/base/farm/farmSq/xcd', idField: 'id', sort: 'id,desc', crudMethod: { }})
  },
  data() {
    return {
      pickDateRange: [(new Date()).daysAgo(7).strftime('%Y-%m-%d'),(new Date()).strftime('%Y-%m-%d')], // 查询时间段
      permission: {
      },
      rules: {
      },
      queryTypeOptions: [
        { key: 'startDate', display_name: '开始日期' },
        { key: 'endDate', display_name: '截至日期' }
      ],
      fields: []
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      if (this.pickDate !== undefined && this.pickDate.length === 2) {
        this.query.startDate = this.pickDateRange[0]
        this.query.endDate = this.pickDateRange[1]
        console.log(this.query)
      } else {
        this.query.startDate = null
        this.query.endDate = null
      }
      return true
    },
    [CRUD.HOOK.beforeResetQurey]() {
      let endDate = new Date()
      let startDate = endDate.daysAgo(7)
      var picker = this.$refs.rangPicker.picker
      if(picker){
        picker.$emit('pick', [startDate.strftime('%Y-%m-%d'), endDate.strftime('%Y-%m-%d')]);
      }
    },
    [CRUD.HOOK.beforeToEdit](crud, form) {
    }
  }
}
</script>

<style scoped>

</style>
